<template>
  <div>
    <template v-for="(item, index) in formData">
      <el-row :key="index" :gutter="item.gutter || 24">
        <el-col
          v-for="(elItem, i) in item.formColData"
          :key="i"
          :span="elItem.span || 24 / item.formColData.length"
        >
          <el-form-item :label="elItem.label" :prop="elItem.prop">
            <template v-if="elItem.type === 'input'">
              <el-input
                v-model="form[elItem.prop]"
                :placeholder="elItem.placeholder"
              />
            </template>
            <template v-if="elItem.type === 'tree'">
              <treeselect
                v-model="form[elItem.prop]"
                :options="elItem.deptOptions"
                :show-count="true"
                :placeholder="elItem.placeholder"
              />
            </template>
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "ElForm",
  components: { Treeselect },
  props: {
    formData: {
      type: Array,
      default: [],
    },
    form: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {};
  },
  created() {
    console.log("formData", this.formData);
  },
  methods: {},
};
</script>